<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" placeholder="请设置爆炸时间（秒）" id="ipBomb" />
    <p id="pBomb">炸弹信息</p>
    <button id="btnSet">设置炸弹</button>
    <button id="btnClear">拆除炸弹</button>

    <script>
      /* 全部变量（两个按钮的点击事件处理函数都要访问） */
      // 炸弹（延时定时器）
      var bombId;
      // 秒表（周期定时器）
      var clockId;

      // 炸弹存在否？
      var bombExist = false;
      // 剩余秒数
      var count = 0

      /* 点击种植炸弹 */
      btnSet.onclick = function () {
        /* 如果炸弹已种下，骂人+退出 */
        if(bombExist){
          alert("炸弹已种植")
          return//退出种植逻辑
        }

        // 宣布10秒后爆炸
        count = ipBomb.value * 1
        pBomb.innerText = count

        // 设置延时爆炸
        bombId = window.setTimeout(
          function(){
            // 炸弹爆炸
            pBomb.innerText = "BOOOM!!!"

            // 钟表炸稀碎
            window.clearInterval(clockId)

            // 炸弹不存在
            bombExist = false
          },
          10*1000
        )

        // 设置秒表
        clockId = window.setInterval(
          function(){
            // 剩余秒数--
            count--

            // 显示最新的剩余秒数
            pBomb.innerText = count
          },
          1000
        )

        // 宣布炸弹存在真
        bombExist = true
      };

      /* 点击拆除炸弹 */
      btnClear.onclick = function () {
        /* 没有炸弹还让哥拆 骂人+退出 */
        if(bombExist===false){
          alert("没有炸弹可拆")
          return//退出拆除逻辑
        }

        // 拆除延时爆炸
        window.clearTimeout(bombId)

        // 拆除秒表
        window.clearInterval(clockId)

        // 宣布炸弹存在为假
        pBomb.innerText = "炸弹已拆除"
        bombExist = false
      };
    </script>
  </body>
</html>
